<template>
  <div class="list-component">
    <!-- 基础列表组件 -->
    <div v-if="type === 'list-basic'" class="list-basic-component">
      <div class="data-list">
        <div v-for="(item, index) in props.data" :key="index" class="list-item">
          <div class="item-content">
            <div v-if="item.icon" class="item-icon">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="item-main">
              <div v-if="item.title" class="item-title">{{ item.title }}</div>
              <div v-if="item.description" class="item-desc">{{ item.description }}</div>
            </div>
            <div v-if="item.extra" class="item-extra">{{ item.extra }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 滚动列表组件 -->
    <div v-else-if="type === 'list-scroll'" class="list-scroll-component">
      <div class="scroll-container">
        <div 
          class="scroll-content"
          :class="{ 'scroll-paused': isHovered && props.hoverStop }"
          :style="{ 
            transform: `translateY(${scrollOffset}px)`,
            transition: isHovered && props.hoverStop ? 'none' : 'transform 0.5s linear'
          }"
          @mouseenter="handleMouseEnter"
          @mouseleave="handleMouseLeave"
        >
          <div class="scroll-list">
            <div 
              v-for="(item, index) in scrollData" 
              :key="index" 
              class="scroll-item"
            >
              <div class="item-content">
                <div v-if="item.icon" class="item-icon">
                  <el-icon><component :is="item.icon" /></el-icon>
                </div>
                <div class="item-main">
                  <div v-if="item.title" class="item-title">{{ item.title }}</div>
                  <div v-if="item.description" class="item-desc">{{ item.description }}</div>
                </div>
                <div v-if="item.extra" class="item-extra">{{ item.extra }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'

const props = defineProps({
  type: {
    type: String,
    required: true
  },
  props: {
    type: Object,
    default: () => ({})
  }
})

// 滚动列表相关状态
const scrollOffset = ref(0)
const isHovered = ref(false)
let scrollInterval = null

// 计算滚动数据
const scrollData = computed(() => {
  if (!props.props.data || props.props.data.length === 0) return []
  const originalData = props.props.data
  const repeatedData = [...originalData, ...originalData]
  return repeatedData
})

// 处理鼠标进入
const handleMouseEnter = () => {
  isHovered.value = true
}

// 处理鼠标离开
const handleMouseLeave = () => {
  isHovered.value = false
}

// 开始滚动
const startScroll = () => {
  if (scrollInterval) {
    clearInterval(scrollInterval)
  }
  
  const step = props.props.step || 1
  const delay = props.props.delay || 3000
  
  scrollInterval = setInterval(() => {
    if (!isHovered.value || !props.props.hoverStop) {
      scrollOffset.value -= step
      const maxOffset = -(props.props.data?.length || 0) * 60
      if (scrollOffset.value <= maxOffset) {
        scrollOffset.value = 0
      }
    }
  }, delay)
}

// 监听数据变化
watch(() => props.props.data, () => {
  if (props.type === 'list-scroll') {
    scrollOffset.value = 0
    startScroll()
  }
}, { deep: true })

onMounted(() => {
  if (props.type === 'list-scroll') {
    startScroll()
  }
})

onUnmounted(() => {
  if (scrollInterval) {
    clearInterval(scrollInterval)
  }
})
</script>

<style scoped>
.list-component {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 基础列表样式 */
.list-basic-component {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.data-list {
  background: transparent;
}

.list-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  transition: background-color 0.3s ease;
}

.list-item:hover {
  background: rgba(64, 158, 255, 0.1);
}

/* 滚动列表样式 */
.list-scroll-component {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scroll-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  width: 100%;
}

.scroll-content.scroll-paused {
  transition: none;
}

.scroll-list {
  width: 100%;
}

.scroll-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  transition: background-color 0.3s ease;
}

.scroll-item:hover {
  background: rgba(64, 158, 255, 0.1);
}

/* 通用列表项样式 */
.item-content {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.item-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
}

.item-main {
  flex: 1;
  min-width: 0;
}

.item-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #fff;
}

.item-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

.item-extra {
  flex-shrink: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* 滚动条样式 */
.list-basic-component::-webkit-scrollbar {
  width: 6px;
}

.list-basic-component::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.list-basic-component::-webkit-scrollbar-track {
  background: transparent;
}
</style> 